<template>
  <el-dialog
    title="服务脚本配置"
    v-model="dialogVisible"
    :width="dialogWidth"
    :before-close="handleClose"
    destroy-on-close
  >
    <div v-if="service" class="script-container">
      <el-alert
        title="脚本配置说明"
        type="info"
        description="配置各种操作的执行脚本，支持单行或多行命令。脚本将在服务器操作时执行。"
        :closable="false"
        show-icon
        class="script-alert"
      />
      
      <h3 class="service-title">{{ service.name }} <span class="service-path">{{ service.path }}</span></h3>
      
      <el-tabs type="border-card" class="script-tabs">
        <el-tab-pane label="启动脚本">
          <el-form :model="form" ref="formRef" label-position="top">
            <el-form-item prop="startScript">
              <template #label>
                <div class="script-label">
                  <span>启动脚本</span>
                  <span class="script-help">例如：cd {{ service.path }} && ./start.sh</span>
                </div>
              </template>
              <el-input 
                v-model="form.startScript" 
                type="textarea" 
                :rows="4" 
                placeholder="请输入启动服务的命令脚本"
                class="script-input"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="停止脚本">
          <el-form :model="form" ref="stopFormRef" label-position="top">
            <el-form-item prop="stopScript">
              <template #label>
                <div class="script-label">
                  <span>停止脚本</span>
                  <span class="script-help">例如：cd {{ service.path }} && ./stop.sh</span>
                </div>
              </template>
              <el-input 
                v-model="form.stopScript" 
                type="textarea" 
                :rows="4" 
                placeholder="请输入停止服务的命令脚本"
                class="script-input"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="重启脚本">
          <el-form :model="form" ref="restartFormRef" label-position="top">
            <el-form-item prop="restartScript">
              <template #label>
                <div class="script-label">
                  <span>重启脚本</span>
                  <span class="script-help">例如：cd {{ service.path }} && ./restart.sh</span>
                </div>
              </template>
              <el-input 
                v-model="form.restartScript" 
                type="textarea" 
                :rows="4" 
                placeholder="请输入重启服务的命令脚本"
                class="script-input"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="状态检查脚本">
          <el-form :model="form" ref="statusFormRef" label-position="top">
            <el-form-item prop="statusScript">
              <template #label>
                <div class="script-label">
                  <span>状态检查脚本</span>
                  <span class="script-help">例如：ps -ef | grep {{ service.name }} | grep -v grep</span>
                </div>
              </template>
              <el-input 
                v-model="form.statusScript" 
                type="textarea" 
                :rows="4" 
                placeholder="请输入检查服务状态的命令脚本"
                class="script-input"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import type { FormInstance } from 'element-plus'
import { type Service } from '../stores/services'

interface ScriptForm {
  startScript: string
  stopScript: string
  restartScript: string
  statusScript: string
}

interface ServiceWithScripts extends Service {
  scripts?: {
    start: string
    stop: string
    restart: string
    status: string
  }
}

const props = defineProps<{
  visible: boolean
  service?: ServiceWithScripts
}>()

const emit = defineEmits(['update:visible', 'save'])

const dialogVisible = ref(props.visible)
const formRef = ref<FormInstance>()

// 根据窗口大小计算对话框宽度
const dialogWidth = computed(() => {
  // 如果是移动设备或窄屏设备
  if (window.innerWidth < 768) {
    return '95%'
  } 
  // 中等大小屏幕
  else if (window.innerWidth < 1200) {
    return '80%'
  } 
  // 宽屏设备
  else {
    return '65%'
  }
})

const form = reactive<ScriptForm>({
  startScript: '',
  stopScript: '',
  restartScript: '',
  statusScript: ''
})

watch(() => props.visible, (newValue) => {
  dialogVisible.value = newValue
})

watch(() => dialogVisible.value, (newValue) => {
  emit('update:visible', newValue)
})

watch(() => props.service, (newValue) => {
  if (newValue && newValue.scripts) {
    form.startScript = newValue.scripts.start || ''
    form.stopScript = newValue.scripts.stop || ''
    form.restartScript = newValue.scripts.restart || ''
    form.statusScript = newValue.scripts.status || ''
  } else if (newValue) {
    // 提供默认脚本
    form.startScript = `cd ${newValue.path} && ./${newValue.name.toLowerCase()} start`
    form.stopScript = `cd ${newValue.path} && ./${newValue.name.toLowerCase()} stop`
    form.restartScript = `cd ${newValue.path} && ./${newValue.name.toLowerCase()} restart`
    form.statusScript = `ps -ef | grep ${newValue.name.toLowerCase()} | grep -v grep`
  }
}, { immediate: true })

const handleClose = () => {
  dialogVisible.value = false
}

const submitForm = async () => {
  if (!props.service) return
  
  const scripts = {
    start: form.startScript,
    stop: form.stopScript,
    restart: form.restartScript,
    status: form.statusScript
  }
  
  emit('save', { serviceId: props.service.id, scripts })
  dialogVisible.value = false
}

defineExpose({
  dialogVisible
})
</script>

<style scoped>
.script-container {
  max-width: 100%;
}

.script-tabs {
  margin-top: 20px;
}

.service-title {
  margin: 15px 0;
  font-size: 1.3em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.service-path {
  font-size: 0.8em;
  color: #909399;
  font-weight: normal;
}

.script-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.script-help {
  font-size: 12px;
  color: #909399;
}

.script-input {
  font-family: monospace;
}

.script-alert {
  margin-bottom: 15px;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .script-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .service-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}
</style> 